<template>
	<view style="background-color: #f2f2f2;">
		<u-tabs :list="tabsList" :is-scroll="true" :current="currentIndex" @change="tabChangeHandler" active-color="#FF7104" style="width:100vw;position: fixed;top: 80rpx;z-index: 9;height: 80rpx;box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.5);"></u-tabs>

		<view class="records" v-if="dataList && dataList.length">
			<view class="record-item" v-for="(item, i) in dataList" :key="i">
				<view class="item-header">
					<view style="font-weight: 600;">{{item.order_no}}</view>
					<view style="color:#a9a9a9;font-size: 9pt;">
						{{item.cash_type | cashTypeFilter}}
					</view>
				</view>
				<view class='item-amount'>
					<view>
						<view style="font-size:20pt;text-align: center;font-weight: 600;color:green">{{item.fact_price}}</view>
						<view style="font-size: 10pt;text-align: center;color:#a9a9a9">到账金额</view>
					</view>
					<view style="display: flex;justify-content: space-around;margin-top: 40rpx;">
						<view>
							<view style="font-size:12pt;text-align: center;">{{item.price}}</view>
							<view style="font-size: 9pt;color:#a9a9a9">提现总金额</view>
						</view>

						<view>
							<view style="font-size:12pt;text-align: center;color:red">{{parseFloat(item.price - item.fact_price).toFixed(2)}}</view>
							<view style="font-size: 9pt;color:#a9a9a9">手续费金额</view>
						</view>
					</view>
				</view>
				<view v-if="item.account_code" class="item-account">
					<view style="font-size: 9pt; width: 30%;" v-line-clamp="1">{{item.bank_name}}</view>
					<view style="font-size: 10pt;width:68%;text-align: right;" v-line-clamp="1">{{item.account_code}}</view>
				</view>
				<view class="item-footer">
					<view style="display: flex;justify-content: space-between">
						<view>{{ formatTimeToStr(item.created_at) }}</view>
						<view style="display: flex;align-items: center;" @click="showFailDetail(item)">
							<text :style="item.status |statusTextStyleFilter">{{item.status | cashStatusFilter}}</text>
							<u-icon v-if="item.status == 3 || item.status == 6" style="margin-left: 10rpx;" size="15pt" name="question-circle-fill"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
		</view>
		
		
		<view @click="filterVisible = true" class="filter-btn">筛 选</view>
		
		<u-popup mode="bottom" v-model="filterVisible" border-radius="20" height="800rpx">
			<view class="filter-content">
				<view style="display: flex;justify-content: space-between;position: fixed;top:0;width: 100%;height: 100rpx;align-items: center;padding:0 20rpx;font-size: 12pt;">
					<view style="padding: 0 40rpx;" @click="filterVisible = false">取消</view>
					<view style="padding: 0 40rpx;color:#FF7104" @click="filterConfirm">确定</view>
				</view>
				<scroll-view scroll-y="true" style="height: 780rpx;padding-top: 100rpx;">
					<u-form :model="searchForm" ref="searchForm" style="padding: 0 20rpx;" label-position="top" rules="searchFormRules">
						<u-form-item label="提现时间">
							<u-input @click="datePickerVisible = true" placeholder="请选择时间范围" :value="searchForm.date.length == 2?searchForm.date[0]+'~'+searchForm.date[1] : ''" ></u-input>
						</u-form-item>
						<u-form-item label="提现状态">
							<u-checkbox-group @change="checkboxGroupChange">
								<u-checkbox v-model="item.checked" v-for="(item, index) in statusOptions" :key="index" :name="item.value">
									{{ item.name }}
								</u-checkbox>
							</u-checkbox-group>
						</u-form-item>
					</u-form>
				</scroll-view>
			</view>
		</u-popup>
		<u-calendar v-model="datePickerVisible" mode="range" @change="dateChangeHandler"></u-calendar>
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	
	let that;
	export default{
		data(){
			return {
				tabsList:[
					{name:'全部',value:''},
					{name:'兰亭余额提现',value:'4'},
					{name:'恒信通余额提现',value:'5'}
				],
				currentIndex: 0,
				loadStatus:'nomore',
				
				searchForm:{
					cash_type:'',
					date:[],
					status:[0,1,2,3,4,5,6]
				},
				dataList:[],
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
				filterVisible:false,
				statusOptions:[
					{name:'待审核',value:'0',checked:true},
					{name:'待确认',value:'1',checked:true},
					{name:'待打款',value:'2',checked:true},
					{name:'已驳回',value:'3',checked:true},
					{name:'打款中',value:'4',checked:true},
					{name:'打款成功',value:'5',checked:true},
					{name:'打款失败',value:'6',checked:true}
				],
				datePickerVisible:false
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			let cash_type = opt.cash_type ?? '';
			let findIndex = this.tabsList.findIndex(item => {
				return item.value == cash_type
			})
			if(findIndex !== -1){
				this.searchForm.cash_type = cash_type;
				this.currentIndex = findIndex;
			}

			this.getRecordList()
		},
		computed:{
			formatTimeToStr(){
				return value => formatTimeToStr(value * 1000,'yyyy-MM-dd hh:mm')
			},
		},
		filters:{
			cashTypeFilter(cash_type){
				const cashTypeMap = {
					'1' : '兰亭收益提现',
					'4' : '兰亭余额提现',
					'5' : '恒信通余额提现'
				}
				return cashTypeMap[cash_type] ?? '未知类型提现'
			},
			cashStatusFilter(status){
				let find = that.statusOptions.find(item =>{
					return item.value == status
				})
				return find.name;
			},
			statusTextStyleFilter(status){
				let style = {};
				const statusTextStyleMap = {
					'0' : '#303133',
					'1' : '#2b85e4',
					'2' : '#2979ff',
					'3' : '#ff9900',
					'4' : '#2979ff',
					'5' : '#19be6b',
					'6' : '#fa3534'
				}
				
				style.color = statusTextStyleMap[status];
				return style;
			}
		},
		methods:{
			tabChangeHandler(index){
				this.currentIndex = index;
				this.searchForm.cash_type = this.tabsList[index].value;
				this.initData()
				this.getRecordList()
			},
			initData(){
				this.dataList = [];
				this.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},
			async getRecordList(){
				this.loadStatus = 'loading';
				let { current_page, pageSize } = this.pagination;
				
				let res = await this.$http.request({
					url: this.$api.cash.record,
					method: 'POST',
					data: {page: current_page,...this.searchForm},
					showLoading:true
				});
				this.loadStatus = 'nomore';
				if(res.code !== 0){
					return this.$http.toast(res.msg);
				}
				let { list, pagination } = res.data;
				this.dataList = this.dataList.concat(list);
				this.pagination = pagination;
				if (this.pagination.current_page < this.pagination.page_count) {
					this.loadStatus = 'loadmore';
				}
			},
			showFailDetail(row){
				let str = '';
				switch(row.status){
					case '3': str += '驳回原因：' + row.content.reject_content; break;
					case '6': str += '失败原因：' + row.content.error_msg; break;
					default: return ;
				}
				return this.$http.toast(str);
			},
			filterConfirm(){
				this.filterVisible =false;
				this.initData()
				this.getRecordList()
			},
			//多选框change事件处理
			checkboxGroupChange(e){
				this.searchForm.status = e;
			},
			//时间选择change时间处理
			dateChangeHandler(e){
				this.searchForm.date = [e.startDate,e.endDate];
			},
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getRecordList();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getRecordList();
		}
	}
</script>

<style lang="scss" scoped>
	.records{
		padding-bottom: 100rpx;
		margin-top: 110rpx;
		min-height: 100vh;
	}
	.item-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #f2f2f2;
		padding-bottom: 20rpx;
	}
	.record-item{
		background-color: #fff;
		padding: 20rpx;
		margin: 20rpx 0;
		// border-bottom: 2rpx solid #f2f2f2;
		&:last-child {
			border-bottom: 0;
		}
	}
	.item-amount{
		padding: 20rpx;
	}
	.amount-title{
		font-size: 10pt;
		text-align: center;
	}
	.item-account{
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		margin-top: 20rpx;
		border-top: 2rpx solid #f2f2f2;
	}
	.item-footer{
		border-top: 2rpx solid #f2f2f2;
		padding-top: 20rpx;
	}
	
	.filter-btn{
		width: 100vw;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		bottom: 0;
		z-index: 9;
		background-color: #FF7104;
		color:#fff;
		font-size: 12pt;
		font-weight: 600;
	}
</style>